<template>
    <div>
        <!-- <h3>{{$store.getters.bigSum}}</h3> -->
        <!-- <h3>{{$store.state.sum}}</h3> -->
        <select v-model.number="n">
            <option value="1" >1</option>
            <option value="2" >2</option>
            <option value="3" >3</option>
        </select>
        <!-- <button @click="increase">+</button>
        <button @click="decrease">-</button> -->
        <button @click="increase(n)">+</button>
        <button @click="decrease(n)">-</button>
        <button @click="increaseOdd(n)">value是奇数再加</button>
        <button @click="increaseWait(n)">等1s再加</button>
        <!-- vuex的组件共享复用 -->
        <h4>{{personList.length}}</h4>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
    export default {
        name : "Count",
        data(){
            return {
                n:1,
                sum:0,
                school:"属性",
                subject:"",
            }
        },
        computed:{
            // 带命名空间的写法
            ...mapState('countOptions',[
                'sum',
                'n',
                'school',
                'subject',
            ]),
            ...mapGetters('countOptions',[
                'bigSum',
            ])
        },
        methods:{
            ...mapMutations('countOptions',[
                'increase',
                'decrease',
            ]),
            ...mapActions('countOptions',[
                'increaseOdd',
                'increaseWait',
            ]),
        }
    }
</script>

<style scoped>
    button{
        margin : 5px;
    }
    select{
        margin : 5px;
    }
</style>